<template>
    <el-container>
        <el-aside>
            <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <template v-for="(menu) in routerMenuData">
                    <template v-if="menu.children">
                        <el-submenu :index="menu.meta.index">
                            <template slot="title">
                                <i :class="menu.meta.icon"></i>
                                <span>{{menu.meta.title}}</span>
                            </template>
                            <template v-for="(childrenMenu) in menu.children">
                                <router-link :to="childrenMenu.path">
                                    <el-menu-item :index="childrenMenu.meta.index">
                                        <i :class="childrenMenu.meta.icon"></i>
                                        {{childrenMenu.meta.title}}
                                    </el-menu-item>
                                </router-link>
                            </template>
                        </el-submenu>
                    </template>


                    <template v-else>
                        <router-link :to="menu.path">
                            <el-menu-item :index="menu.meta.index">
                                <i :class="menu.meta.icon"></i>
                                {{menu.meta.title}}
                            </el-menu-item>
                        </router-link>
                    </template>


                </template>
            </el-menu>
        </el-aside>
        <el-main>
            <router-view/>
        </el-main>
    </el-container>
</template>

<script>
    import {constantRoutes} from './router'

    export default {
        name: 'app',
        components: {},
        data() {
            return {
                routerMenuData: '',//路由菜单数据
            }
        },
        mounted() {
            //获取路由数据
            this.routerMenuData = constantRoutes
        },
    }
</script>

<style scoped>
    .el-menu-vertical-demo {
        border: 0;
    }

    .el-container {
        height: 100vh;
    }

    .el-aside {
        width: 240px !important;
        background-color: #545c64;
    }
</style>
